<template>

  <a-drawer
    placement="right"
    :title="title"
    :visible="visible"
    @close="cancel"
  >

<a-form>

</a-form>

    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="handleOk">确定</a-button>
      <a-button type="primary" @click="cancel">取消</a-button>
    </div>
  </a-drawer>

</template>

<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from 'vue';
import { useForm } from '@ant-design-vue/use';
import _ from 'lodash-es';
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Array,
      default: () => ({}),
    },
  },
  emits: ['confirm', 'update:visible'],
  setup() {
    const { form } = toRefs(props);
    const state = reactive({
      modelRef: _.cloneDeep(form.value),
      rulesRef: { 
      }
    });
    const { resetFields, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);

    const confirm = () => {
      validate()
        .then(() => {
          emit('confirm', _.cloneDeep(toRaw(state.modelRef)));
          emit('update:visible', false);
        })
        .catch(err => {
          console.log('error', err);
        });
    };

    const cancel = () => {
      emit('update:visible', false);
      resetFields();
    };

    return {
      ...toRefs(state),
      cancel,
      handleOk,
      validateInfos,
      confirm,
    }
  }
});
</script>
